<template>
  <div class="scheme-add">
    <div class="p32">
      <Breadcrumb>
        <BreadcrumbItem to="/socialsecurity/scheme">返回</BreadcrumbItem>
        <BreadcrumbItem>添加参保方案</BreadcrumbItem>
      </Breadcrumb>
    </div>

    <div class="add-wrap">
      <div class="add-header star">有1000+套全国各地社保公积金政策的参保方案供参考，请选择参保城市</div>
      <div class="add-header-form">
        <Form :model="formHead" :label-width="100">
          <Row>
            <Col span="12" class="right">
              <FormItem label="参保城市">
                <Cascader :data="city" v-model="formHead.city" class="form-input"></Cascader>
              </FormItem>
            </Col>
            <Col span="12">
              <FormItem label="方案名称">
                <Input v-model="formHead.name" class="form-input"></Input>
              </FormItem>
            </Col>
          </Row>
        </Form>
      </div>
      <div class="line-dash"></div>
      <div class="add-header-btns">
        <Button class="mr12 pierced" @click="changeType(1)">设置参保基数和比例</Button>
        <Button class="pierced" @click="changeType(2)">仅设置参保金额</Button>
      </div>
      <div class="add-body">
        <div class="add-section">
          <div class="section-head">
            <span class="title">社保</span>
            <!-- <Checkbox v-model="single" class="ml16">不缴公积金</Checkbox> -->
            <!-- <div class="tool-bar">
              天津有2个社保方案供您参考
              <a href>选择参考方案</a>
            </div>-->
          </div>
          <div class="section-body">
            <Table width="100%" :columns="columns" :data="data4" class="socialsecurity-table"></Table>
          </div>
          <div class="section-footer flex">
            <div class="left"></div>
            <div class="right flex">
              <div class="right-item">
                <span>社保公司总计：</span>
                <span class="red">--</span>
              </div>
              <div class="right-item ml30">
                <span>社保个人总计：</span>
                <span class="red">--</span>
              </div>
            </div>
          </div>
        </div>
        <div class="add-section">
          <div class="section-head">
            <span class="title">公积金</span>
            <Checkbox v-model="single" class="ml16">不缴公积金</Checkbox>
            <!-- <div class="tool-bar">
              天津有2个社保方案供您参考
              <a href>选择参考方案</a>
            </div>-->
          </div>
          <div class="section-body">
            <Table width="100%" :columns="columns" :data="data4" class="socialsecurity-table"></Table>
          </div>
          <div class="section-footer flex">
            <div class="left"></div>
            <div class="right flex">
              <div class="right-item">
                <span>社保公司总计：</span>
                <span class="red">--</span>
              </div>
              <div class="right-item ml30">
                <span>社保个人总计：</span>
                <span class="red">--</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="line-dash"></div>
      <div class="add-footer">
        <div class="footer-total">
          <div class="section-footer flex">
            <div class="left"></div>
            <div class="right flex">
              <div class="right-item">
                <span>社保总计:</span>
                <span class="red">--</span>
              </div>
              <div class="right-item ml30">
                <span>公积金总计：</span>
                <span class="red">--</span>
              </div>
            </div>
          </div>
        </div>
        <div class="footer-btns flex-center">
          <Button class="mr12">取消</Button>
          <Button class="save-btn-green">保存</Button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import provinces from "@/utils/city.js";

export default {
  data() {
    return {
      single: false,
      cityValue: [],
      city: provinces.data,
      formHead: {
        input: ""
      },
      commonColumns: [
        {
          title: "项目名称",
          key: "name",
          align: "center",
          width: 140,
          render: (h, params) => {
            return h("div", [
              h(
                "div",
                {
                  class: "table-input",
                  on: {
                    hover: () => {
                      console.log(111);
                    }
                  }
                },
                params.row.name
              )
            ]);
          }
        },
        {
          title: "默认基数",
          key: "default_base",
          render: (h, params) => {
            return h("div", [
              h(
                "Input",
                {
                  class: "table-input",

                  on: {
                    hover: () => {
                      console.log(111);
                    }
                  }
                },
                params.row.itemname
              )
            ]);
          }
        },
        {
          title: "可选基数范围",
          key: "select_base_start",
          width: 200,
          render: (h, params) => {
            return h("div", [
              h(
                "Input",
                {
                  class: "table-input1",

                  on: {
                    hover: () => {
                      console.log(111);
                    }
                  }
                },
                params.row.itemname
              ),
              h(
                "span",
                {
                  class: "table-input-span"
                },
                ""
              ),
              h(
                "Input",
                {
                  class: "table-input1 ",

                  on: {
                    hover: () => {
                      console.log(111);
                    }
                  }
                },
                params.row.itemname
              )
            ]);
          }
        },
        {
          title: "公司缴纳比例",
          key: "company_percent",
          render: (h, params) => {
            return h(
              "div",
              {
                class: "table-percent",
                style: {
                  position: "relative"
                }
              },
              [
                h(
                  "Input",
                  {
                    class: "table-input table-input-percent",
                    props: {
                      maxlength: "3"
                    }
                  },
                  params.row.itemname
                ),
                h(
                  "span",
                  {
                    class: "percent"
                  },
                  "%"
                )
              ]
            );
          }
        },
        {
          title: "个人缴纳比例",
          key: "person_percent",
          render: (h, params) => {
            return h(
              "div",
              {
                class: "table-percent",
                style: {
                  position: "relative"
                }
              },
              [
                h(
                  "Input",
                  {
                    class: "table-input table-input-percent",
                    props: {
                      maxlength: "3"
                    }
                  },
                  params.row.itemname
                ),
                h(
                  "span",
                  {
                    class: "percent"
                  },
                  "%"
                )
              ]
            );
          }
        },
        {
          title: "公司固定金额",
          key: "company_fixed_amount",
          render: (h, params) => {
            return h("div", [
              h(
                "Input",
                {
                  class: "table-input",

                  on: {
                    hover: () => {
                      console.log(111);
                    }
                  }
                },
                params.row.itemname
              )
            ]);
          }
        },
        {
          title: "个人固定金额",
          key: "person_fixed_amount",
          render: (h, params) => {
            return h("div", [
              h(
                "Input",
                {
                  class: "table-input",

                  on: {
                    hover: () => {
                      console.log(111);
                    }
                  }
                },
                params.row.itemname
              )
            ]);
          }
        },
        {
          title: "公司金额",
          key: "company_amount",
          render: (h, params) => {
            return h("div", [
              h(
                "Input",
                {
                  class: "table-input",

                  on: {
                    hover: () => {
                      console.log(111);
                    }
                  }
                },
                params.row.itemname
              )
            ]);
          }
        },
        {
          title: "个人金额",
          key: "person_amount",
          render: (h, params) => {
            return h("div", [
              h(
                "Input",
                {
                  class: "table-input",

                  on: {
                    hover: () => {
                      console.log(111);
                    }
                  }
                },
                params.row.itemname
              )
            ]);
          }
        },
        {
          title: "操作",
          key: "action",
          width: 60,
          render: (h, params) => {
            return h("div", [
              h(
                "Icon",
                {
                  props: {
                    type: "ios-trash",
                    size: "20",
                    className: "table-action-btn"
                  },
                  class: "table-action-btn",
                  on: {
                    click: () => {
                      this.openRightCard(params.index);
                    }
                  }
                },
                ""
              )
            ]);
          }
        }
      ],
      // 社保 cloums
      columns: [
        {
          title: "项目名称",
          key: "name",
          align: "center",
          width: 140,
          render: (h, params) => {
            return h("div", [
              h(
                "div",
                {
                  class: "table-input",
                  on: {
                    hover: () => {
                      console.log(111);
                    }
                  }
                },
                params.row.name
              )
            ]);
          }
        },
        {
          title: "默认基数",
          key: "default_base",
          render: (h, params) => {
            let _this = this;
            return h("div", [
              h("Input", {
                class: "table-input",
                props: {
                  value: params.row.default_base
                },
                on: {
                  "on-change"(event) {
                    let value = event.target.value;
                    _this.data4[params.index].default_base = value;
                  }
                }
              })
            ]);
          }
        },
        {
          title: "可选基数范围",
          key: "select_base_start",
          width: 200,
          render: (h, params) => {
            let _this = this;
            return h("div", [
              h("Input", {
                class: "table-input1",
                props: {
                  value: params.row.select_base_start
                },
                on: {
                  "on-change"(event) {
                    let value = event.target.value;
                    _this.data4[params.index].select_base_start = value;
                  }
                }
              }),
              h(
                "span",
                {
                  class: "table-input-span"
                },
                ""
              ),
              h("Input", {
                class: "table-input1 ",
                props: {
                  value: params.row.select_base_end
                },
                on: {
                  "on-change"(event) {
                    let value = event.target.value;
                    _this.data4[params.index].select_base_end = value;
                  }
                }
              })
            ]);
          }
        },
        {
          title: "公司缴纳比例",
          key: "company_percent",
          render: (h, params) => {
            let _this = this;
            return h(
              "div",
              {
                class: "table-percent",
                style: {
                  position: "relative"
                }
              },
              [
                h("Input", {
                  class: "table-input table-input-percent",
                  props: {
                    maxlength: "3",
                    value: params.row.company_percent
                  },
                  on: {
                    "on-change"(event) {
                      let value = event.target.value;
                      _this.data4[params.index].company_percent = value;
                    }
                  }
                }),
                h(
                  "span",
                  {
                    class: "percent"
                  },
                  "%"
                )
              ]
            );
          }
        },
        {
          title: "个人缴纳比例",
          key: "person_percent",
          render: (h, params) => {
            let _this = this;
            return h(
              "div",
              {
                class: "table-percent",
                style: {
                  position: "relative"
                }
              },
              [
                h("Input", {
                  class: "table-input table-input-percent",
                  props: {
                    maxlength: "3",
                    value: params.row.person_percent
                  },
                  on: {
                    "on-change"(event) {
                      let value = event.target.value;
                      _this.data4[params.index].person_percent = value;
                    }
                  }
                }),
                h(
                  "span",
                  {
                    class: "percent"
                  },
                  "%"
                )
              ]
            );
          }
        },
        {
          title: "公司固定金额",
          key: "company_fixed_amount",
          render: (h, params) => {
            let _this = this;
            return h("div", [
              h("Input", {
                class: "table-input",
                props: {
                  value: params.row.company_fixed_amount
                },
                on: {
                  "on-change"(event) {
                    let value = event.target.value;
                    _this.data4[params.index].company_fixed_amount = value;
                  }
                }
              })
            ]);
          }
        },
        {
          title: "个人固定金额",
          key: "person_fixed_amount",
          render: (h, params) => {
            let _this = this;
            return h("div", [
              h("Input", {
                class: "table-input",
                props: {
                  value: params.row.person_fixed_amount
                },
                on: {
                  "on-change"(event) {
                    let value = event.target.value;
                    _this.data4[params.index].person_fixed_amount = value;
                  }
                }
              })
            ]);
          }
        },
        {
          title: "公司金额",
          key: "company_amount",
          render: (h, params) => {
            let _this = this;
            return h("div", [
              h("Input", {
                class: "table-input",
                props: {
                  value: params.row.company_amount
                },
                on: {
                  "on-change"(event) {
                    let value = event.target.value;
                    _this.data4[params.index].company_amount = value;
                  }
                }
              })
            ]);
          }
        },
        {
          title: "个人金额",
          key: "person_amount",
          render: (h, params) => {
            let _this = this;
            return h("div", [
              h(
                "Input",
                {
                  class: "table-input",
                  props: {
                    value: params.row.person_amount
                  },
                  on: {
                    "on-change"(event) {
                      let value = event.target.value;
                      _this.data4[params.index].person_amount = value;
                    }
                  }
                },
                params.row.itemname
              )
            ]);
          }
        },
        {
          title: "操作",
          key: "action",
          width: 60,
          render: (h, params) => {
            return h("div", [
              h(
                "Icon",
                {
                  props: {
                    type: "ios-trash",
                    size: "20",
                    className: "table-action-btn"
                  },
                  class: "table-action-btn",
                  on: {
                    click: () => {
                      this.openRightCard(params.index);
                    }
                  }
                },
                ""
              )
            ]);
          }
        }
      ],

      // 公积金cloums
      columnsSecurity: [
        {
          title: "添加项目",
          key: "name",
          width: 140,
          render: (h, params) => {
            return h("div", [
              h(
                "div",
                {
                  class: "table-input",
                  on: {
                    hover: () => {
                      console.log(111);
                    }
                  }
                },
                params.row.name
              )
            ]);
          }
        },
        {
          title: "默认基数",
          key: "age",
          render: (h, params) => {
            return h("div", [
              h(
                "Input",
                {
                  class: "table-input",

                  on: {
                    hover: () => {
                      console.log(111);
                    }
                  }
                },
                params.row.itemname
              )
            ]);
          }
        },
        {
          title: "可选基数范围",
          key: "province",
          width: 200,
          render: (h, params) => {
            return h("div", [
              h(
                "Input",
                {
                  class: "table-input1",

                  on: {
                    hover: () => {
                      console.log(111);
                    }
                  }
                },
                params.row.itemname
              ),
              h(
                "span",
                {
                  class: "table-input-span"
                },
                ""
              ),
              h(
                "Input",
                {
                  class: "table-input1 ",

                  on: {
                    hover: () => {
                      console.log(111);
                    }
                  }
                },
                params.row.itemname
              )
            ]);
          }
        },
        {
          title: "公司缴纳比例",
          key: "city",
          render: (h, params) => {
            return h(
              "div",
              {
                class: "table-percent",
                style: {
                  position: "relative"
                }
              },
              [
                h(
                  "Input",
                  {
                    class: "table-input table-input-percent",
                    props: {
                      maxlength: "3"
                    }
                  },
                  params.row.itemname
                ),
                h(
                  "span",
                  {
                    class: "percent"
                  },
                  "%"
                )
              ]
            );
          }
        },
        {
          title: "个人缴纳比例",
          key: "age",
          render: (h, params) => {
            return h(
              "div",
              {
                class: "table-percent",
                style: {
                  position: "relative"
                }
              },
              [
                h(
                  "Input",
                  {
                    class: "table-input table-input-percent",
                    props: {
                      maxlength: "3"
                    }
                  },
                  params.row.itemname
                ),
                h(
                  "span",
                  {
                    class: "percent"
                  },
                  "%"
                )
              ]
            );
          }
        },
        {
          title: "公司固定金额",
          key: "province",
          render: (h, params) => {
            return h("div", [
              h(
                "Input",
                {
                  class: "table-input",

                  on: {
                    hover: () => {
                      console.log(111);
                    }
                  }
                },
                params.row.itemname
              )
            ]);
          }
        },
        {
          title: "个人固定金额",
          key: "city",
          render: (h, params) => {
            return h("div", [
              h(
                "Input",
                {
                  class: "table-input",

                  on: {
                    hover: () => {
                      console.log(111);
                    }
                  }
                },
                params.row.itemname
              )
            ]);
          }
        },
        {
          title: "公司金额",
          key: "city",
          render: (h, params) => {
            return h("div", [
              h(
                "Input",
                {
                  class: "table-input",

                  on: {
                    hover: () => {
                      console.log(111);
                    }
                  }
                },
                params.row.itemname
              )
            ]);
          }
        },
        {
          title: "个人金额",
          key: "city",
          render: (h, params) => {
            return h("div", [
              h(
                "Input",
                {
                  class: "table-input",

                  on: {
                    hover: () => {
                      console.log(111);
                    }
                  }
                },
                params.row.itemname
              )
            ]);
          }
        },
        {
          title: "操作",
          key: "action",
          width: 60,
          render: (h, params) => {
            return h("div", [
              h(
                "Icon",
                {
                  props: {
                    type: "ios-trash",
                    size: "20",
                    className: "table-action-btn"
                  },
                  class: "table-action-btn",
                  on: {
                    click: () => {
                      this.openRightCard(params.index);
                    }
                  }
                },
                ""
              )
            ]);
          }
        }
      ],

      // 固定金额
      fixedAmountCloumns: [
        {
          title: "添加项目",
          key: "name",
          width: 140,
          render: (h, params) => {
            return h("div", [
              h(
                "div",
                {
                  class: "table-input",
                  on: {
                    hover: () => {
                      console.log(111);
                    }
                  }
                },
                params.row.name
              )
            ]);
          }
        },
        {
          title: "默认基数",
          key: "province",
          render: (h, params) => {
            return h("div", [
              h(
                "Input",
                {
                  class: "table-input",

                  on: {
                    hover: () => {
                      console.log(111);
                    }
                  }
                },
                params.row.itemname
              )
            ]);
          }
        },
        {
          title: "公司金额",
          key: "province",
          render: (h, params) => {
            return h("div", [
              h(
                "Input",
                {
                  class: "table-input",

                  on: {
                    hover: () => {
                      console.log(111);
                    }
                  }
                },
                params.row.itemname
              )
            ]);
          }
        },
        {
          title: "个人金额",
          key: "province",
          render: (h, params) => {
            return h("div", [
              h(
                "Input",
                {
                  class: "table-input",

                  on: {
                    hover: () => {
                      console.log(111);
                    }
                  }
                },
                params.row.itemname
              )
            ]);
          }
        },
        {
          title: "操作",
          key: "action",
          width: 60,
          render: (h, params) => {
            return h("div", [
              h(
                "Icon",
                {
                  props: {
                    type: "ios-trash",
                    size: "20",
                    className: "table-action-btn"
                  },
                  class: "table-action-btn",
                  on: {
                    click: () => {
                      this.openRightCard(params.index);
                    }
                  }
                },
                ""
              )
            ]);
          }
        }
      ],
      // 社保
      data4: [
        {
          type: "1",
          name: "养老保险",
          default_base: "0",
          select_base_start: "0",
          select_base_end: "999999",
          company_percent: "",
          person_percent: "",
          person_amount: "",
          company_fixed_amount: "",
          person_fixed_amount: "",
          company_amount: "",
          company_mantissa_processing: "",
          person_mantissa_processing: "",
          actual_base: ""
        },
        {
          type: "2",
          name: "养老保险",
          default_base: "0",
          select_base_start: "0",
          select_base_end: "999999",
          company_percent: "",
          person_percent: "",
          company_amount: "",
          person_amount: "",
          company_fixed_amount: "",
          person_fixed_amount: "",
          company_amount: "",
          company_mantissa_processing: "",
          person_mantissa_processing: "",
          actual_base: ""
        },
        {
          type: "3",
          name: "养老保险",
          default_base: "0",
          select_base_start: "0",
          select_base_end: "999999",
          company_percent: "",
          person_percent: "",
          company_amount: "",
          person_amount: "",
          company_fixed_amount: "",
          person_fixed_amount: "",
          company_amount: "",
          company_mantissa_processing: "",
          person_mantissa_processing: "",
          actual_base: ""
        },
        {
          type: "1",
          name: "养老保险",
          default_base: "0",
          select_base_start: "0",
          select_base_end: "999999",
          company_percent: "",
          person_percent: "",
          company_amount: "",
          person_amount: "",
          company_fixed_amount: "",
          person_fixed_amount: "",
          company_amount: "",
          company_mantissa_processing: "",
          person_mantissa_processing: "",
          actual_base: ""
        },
        {
          type: "1",
          name: "养老保险",
          default_base: "0",
          select_base_start: "0",
          select_base_end: "999999",
          company_percent: "",
          person_percent: "",
          company_amount: "",
          person_amount: "",
          company_fixed_amount: "",
          person_fixed_amount: "",
          company_amount: "",
          company_mantissa_processing: "",
          person_mantissa_processing: "",
          actual_base: ""
        },
        {
          type: "1",
          name: "养老保险",
          default_base: "0",
          select_base_start: "0",
          select_base_end: "999999",
          company_percent: "",
          person_percent: "",
          company_amount: "",
          person_amount: "",
          company_fixed_amount: "",
          person_fixed_amount: "",
          company_amount: "",
          company_mantissa_processing: "",
          person_mantissa_processing: "",
          actual_base: ""
        },
        {
          type: "1",
          name: "养老保险",
          default_base: "0",
          select_base_start: "0",
          select_base_end: "999999",
          company_percent: "",
          person_percent: "",
          company_amount: "",
          person_amount: "",
          company_fixed_amount: "",
          person_fixed_amount: "",
          company_amount: "",
          company_mantissa_processing: "",
          person_mantissa_processing: "",
          actual_base: ""
        }
      ]
    };
  },
  methods: {
    changeType(e) {
      // 切换参保方式
      if (e == 1) {
        this.columns = this.commonColumns;
      } else {
        this.columns = this.fixedAmountCloumns;
      }
    },
    setInputValue(value, index, key) {
      this.data4[index][key] = value;
      console.log(this.data4[index][key]);
    }
  }
};
</script>
<style lang="scss" scoped src="./index.scss">
</style>